<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <h1>POST请求</h1>
   <form action="" method="post" id="form">
    <input type="text" name="name">
    <input type="text" name="age">
    <input type="text" name="sex">
    <button type="submit">POST提交</button>
   </form>
    <script>
        //获取dom对象
        const obtn=document.getElementById('btn')
        const oform=document.getElementById('form')
        const oName=document.querySelector('#form input[name=name]')
        const oAge=document.querySelector('#form input[name=age]')
        const oSex=document.querySelector('#form input[name=sex]')
        //绑定提交事件
        oform.onsubmit=function(){
            const nameValue=oName.value
            const ageValue=oAge.value
            const sexValue=oSex.value
            //创建ajax对象
            const xhr=new XMLHttpRequest() 
            //初始化，设置请求类型，和请求地址，是否异步 true
            xhr.open('POST',`/adduser`,true)
            //发送请求
            //设置form表单格式，如果不设置服务端接受不到数据，得告诉服务端我们要发个什么格式的东西,类型后面用分号隔开
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=utf-8')
            xhr.send(`name=${nameValue}&age=${ageValue}&sex=${sexValue}`)
            //json格式
            // xhr.setRequestHeader('Content-Type','application/json,charset=utf-8')
            // xhr.send(JSON.stringify({name:nameValue,age:ageValue,sex:sexValue}))
            //这里onreadystatechange都为小写，否则绑不了事件
            xhr.onreadystatechange=function(e){    
                if(xhr.readyState===4&&(xhr.status>=200&&xhr.status<=299)){
                    console.log(JSON.parse(xhr.responseText));
                }
            }
            return false;
        }
    </script>
</body>
</html>